<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-10-21 10:57:47
-->
<template>
  <modal
    :visible="visible"
    :title="addOrEdit === 0 ? '新增' : '编辑'"
    okText="保存"
    @cancelHandler="onClose"
    @okHandler="handleSubmit"
    :destroyOnClose="true"
    :width="600"
    :bodyHeight="0.8"
    :loading="loading"
  >
    <template slot="content">
      <a-spin :spinning="loading" :delay="200" tip="提交中...">
        <a-form :form="form">
          <a-form-item label="运费模版名称" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'name',
                { rules: [{ required: true, message: '名称不能为空' }, { max: 10, message: '字数不能超过10字' }], initialValue: initRecord.name }
              ]"
              placeholder="请输入名称"
            />
          </a-form-item>
          <a-form-item label="计费方式" v-bind="formItemLayout">
            <a-select
              :showArrow="true"
              v-decorator="['method', { rules: [{ required: true, message: '请选择' }] }]"
              placeholder="请选择"
              :options="[
                  { key: 1, value: 1, title: '按件数' },
                  { key: 2, value: 2, title: '按重量' }
                ]"
            >
            </a-select>
          </a-form-item>
          <a-form-item :label="form.getFieldValue('method') == 1 ? '首件(个)' : '首重(Kg)'" v-bind="formItemLayout">
            <a-input-number
              style="width: 100%"
              :min="0"
              :precision="0"
              v-decorator="['first', { rules: [{ required: true, message: form.getFieldValue('method') == 1 ? '首件个数不能为空' : '首重不能为空' }], initialValue: initRecord.first }]"
            />
          </a-form-item>
          <a-form-item label="运费(元)" v-bind="formItemLayout">
            <a-input-number
              style="width: 100%"
              :min="0"
              :precision="0"
              v-decorator="['firstFee', { rules: [{ required: true, message: '运费不能为空' }], initialValue: initRecord.firstFee }]"
            />
          </a-form-item>
          <a-form-item :label="form.getFieldValue('method') == 1 ? '续件(个)' : '续重(Kg)'" v-bind="formItemLayout">
            <a-input-number
              style="width: 100%"
              :min="0"
              :precision="0"
              v-decorator="['additional', { rules: [{ required: true, message: form.getFieldValue('method') == 1 ? '续件个数不能为空' : '续重不能为空' }], initialValue: initRecord.additional }]"
            />
          </a-form-item>
          <a-form-item label="续费(元)" v-bind="formItemLayout">
            <a-input-number
              style="width: 100%"
              :min="0"
              :precision="0"
              v-decorator="['additionalFee', { rules: [{ required: true, message: '续费不能为空' }], initialValue: initRecord.additionalFee }]"
            />
          </a-form-item>
<!--          <a-form-item label="规格明细" v-bind="formItemLayout" v-show="form.getFieldValue('method') == 2">-->
<!--            <div style="border: 1px solid #E8E8E8; box-sizing: border-box; padding: 10px;">-->
<!--              <div v-show="specSKUItems.length > 0">-->
<!--                <a-table rowKey="id" :dataSource="specSKUItems" :columns="specSKUColumns" :pagination="false" :scroll="{x: true}">-->
<!--                  <template slot="goodsNoScoped" slot-scope="text, record">-->
<!--                    <a-input style="width: 100px;" v-model="record.goodsNo"></a-input>-->
<!--                  </template>-->
<!--                  <template slot="goodsPriceScoped" slot-scope="text, record">-->
<!--                    <a-input-number :min="0" style="width: 80px;" v-model="record.goodsPrice"></a-input-number>-->
<!--                  </template>-->
<!--                  <template slot="linePriceScoped" slot-scope="text, record">-->
<!--                    <a-input-number :min="0" style="width: 80px;" v-model="record.linePrice"></a-input-number>-->
<!--                  </template>-->
<!--                  <template slot="stockNumScoped" slot-scope="text, record">-->
<!--                    <a-input-number :min="0" :precision="0" style="width: 80px;" v-model="record.stockNum"></a-input-number>-->
<!--                  </template>-->
<!--                  <template slot="goodsWeightScoped" slot-scope="text, record">-->
<!--                    <a-input-number :min="0" :precision="0" style="width: 80px;" v-model="record.goodsWeight"></a-input-number>-->
<!--                  </template>-->
<!--                </a-table>-->
<!--              </div>-->
<!--            </div>-->
<!--          </a-form-item>-->
          <a-form-item label="权重" v-bind="formItemLayout">
            <a-input-number
              style="width: 100%"
              :min="0"
              :precision="0"
              v-decorator="['weigh', { rules: [{ required: true, message: '权重不能为空' }], initialValue: initRecord.weigh }]"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </template>
  </modal>
</template>
<script>
import modal from '~/tool/modal';
import { regexp } from 'utils/common';

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 12 }
};

export default {
  name: 'add',
  components: { modal },
  props: {
    // 新增：0，编辑：1
    addOrEdit: {
      type: Number,
      default: 0
    },
    initRecord: {
      type: Object,
      default: () => ({})
    },
    visible: {
      default: false
    },
    // 需要的api
    apiURL: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      regexp,
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
    };
  },
  methods: {
    /**
     * @desc: 渲染selection
     * @author: youzi
     */
    reset() {
      this.loading = false;
      this.form.resetFields();
    },
    onClose() {
      this.$confirm({
        title: '确定放弃编辑吗？',
        content: '',
        okText: '确定',
        cancelText: '取消',
        onOk: this.onCloseConfirm
      });
    },
    onCloseConfirm() {
      this.reset();
      this.$emit('close');
    },
    handleSubmit() {
      // debugger;
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$confirm({
            title: '确定保存吗？',
            content: '',
            okText: '确定',
            cancelText: '取消',
            onOk: this.handleConfirmSubmit
          });
        }
      });
    },
    handleConfirmSubmit() {
      let that = this;
      this.loading = true;
      let tmpObj = this.form.getFieldsValue();
      let postUrl = this.addOrEdit === 0 ? this.apiURL.addRecords : this.apiURL.editRecords;
      if (that.addOrEdit !== 0) {
        tmpObj.id = that.initRecord.id;
      }
      console.log(tmpObj);
      that.$post(postUrl, {
        ...tmpObj
      })
        .then(r => {
          that.reset();
          that.$emit('success');
        })
        .catch(() => {
          that.loading = false;
        });
    }
  },
  mounted() {
    if (this.visible) {
      // 给form赋初值
      this.$nextTick(() => {
        setTimeout(() => {
          if (!this.addOrEdit) {
            this.form.setFieldsValue({
              method: 1
            });
          } else {
            this.form.setFieldsValue({
              method: parseInt(this.initRecord.method)
            });
          }
        })
      });
    }
  }
};
</script>
